﻿
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
<h1><img style="border: none;" src="effektut-files/Effekseer.png" /></h1>
<div style="text-align:center; font-size:18pt; padding-bottom:32px; margin-top:-24px"><b>A tutorial by <a href="http://eggzero.tumblr.com" target="_blank">AndrewFM</a></b><br>(v1.20)</div><br><br>
<div class="tos">
<div class="tos_head"><b>目次</b></div>
	<ul>
	<li><a href='#introduction'>はじめに</a></li>
	<li><a href='#general_interface'>インタフェース</a></li>
		<ul>
		<li><a href='#viewer'>ビュワー</a></li>
		<li><a href='#node_tree'>ノードツリー</a></li>
		<li><a href='#random_fields'>ランダム値入力欄</a></li>
		</ul>
	<li><a href='#particle_emitters'>パーティクルエミッタ（ノード）</a></li>
		<ul>
		<li><a href='#basic_settings'>共通</a></li>
		<li><a href='#inheritance'>影響</a></li>
		<li><a href='#spawn_method_circular'>生成位置 (円)</a></li>
		<li><a href='#spawn_method_spherical'>生成位置 (球)</a></li>
		</ul>
	<li><a href='#particles_behavior'>パーティクル (挙動)</a></li>
		<ul>
		<li><a href='#position_rotation_scale'>位置/回転/拡大</a></li>
		<li><a href='#pva'>PVA</a></li>
		<li><a href='#easing'>イージング</a></li>
		<li><a href='#fcurve'>Fカーブ</a></li>
		<li><a href='#point_of_attraction'>引力</a></li>
		</ul>
	<li><a href='#particles_appearance'>パーティクル (見た目)</a></li>
		<ul>
		<li><a href='#basic_render_settings'>描画共通設定</a></li>
		<li><a href='#sprites'>スプライト</a></li>
		<li><a href='#rings'>リング</a></li>
		<li><a href='#ribbons_tracks'>リボン/軌跡</a></li>
		</ul>
	<li><a href='#exporting'>出力</a></li>
		<ul>
		<li><a href='#to_2d'>2Dスプライトへ</a></li>
		<li><a href='#to_3d'>3Dモデルへ</a></li>
		</ul>
	</ul>
</div>
<a name="introduction"></a>
<h2>はじめに</h2>
<a href="http://effekseer.github.io/en/" target="_blank">Effekseer</a>はゲーム向けのパーティクルエフェクトを作成するためのオープンソースのフリーのプログラムです。このプログラムで作成されたエフェクトは2Dのスプライトシート、AVIファイル、専用の3Dファイル形式で出力できます。このプログラムにはこれらの3DファイルをUnityで再生するためのUnityパッケージが用意されています。同様にDirectXやOpenGLで使用するためのC++のランタイムもあります。Effekseerのインターフェースと特徴は<a href="http://www.matchlock.co.jp/" target="_blank">BISHAMON</a>の影響を強く受けており、Effekseerはこれをシンプルにしたものとも言えます。
<br><br>
このドキュメントはプログラムの概要で、チュートリアルと似た構成をしています。プログラムの特徴の多くをカバーしていますが、完全なマニュアルではありません。マニュアルは<a href="http://effekseer.github.io/Help_Tool/index.html" target="_blank">こちら</a>で見られます。
<br><br>
このチュートリアルの画像を生成するのに使用したEffekseerのプロジェクトファイルは<a href="01_AndrewFM%20Tutorial.zip">ここ</a>からダウンロードできます。

<a name="general_interface"></a>
<h2>インタフェース</h2>
基本的にこのプログラムの機能はスクリーン上部の「ウインドウ」メニューに含まれています。Effekseerのレイアウトは全てカスタマイズでき、ウインドウを加えたり、取り外したり、大きさを変更したり、再配置したり、タブ化したりできます。これは全てドラッグ＆ドロップで簡単に行えます。

<a name="viewer"></a>
<h3>ビュワー</h3>

<table><tr><td>
<img src="effektut-files/jp/viewer.png" />
</td><td class='td1'>
<b>ビューワー</b>では作成されたパーティクルエフェクトをプレビューできます。ビューワーは<b>中央ボタン</b>で平行移動でき、マウスの<b>右ボタン</b>で回転でき、<b>スクロールホイール</b>で拡大・縮小ができます。
<br><br>
<b>スタート</b>と<b>エンド</b>の入力欄は
再生ボタンを押したときのプレビューの間隔を制御します。(このプログラムに関係するすべてのタイミングと同じように)この数値はフレーム(60フレーム=1秒)で換算されます。例えば、間隔を[120,180]と設定した場合、再生ボタンを押すと2秒目からアニメーションが再生され、1秒後の3秒目で停止します。
<br><br>
 <b>ステップ</b>ボタン(二つの三角形)を1回押すとアニメーションを1フレーム進めます。この数値はビューワーで表示している現在のフレームです。
<br><br>
<i>グリッドの表示、色、その他の設定はオプションで変更できます。背景色/画像、光源等といった他の設定も同様に変更できます。</i>
</td></tr></table>

<a name="node_tree"></a>
<h3>ノードツリー</h3>
<table>
<tr><td style="width:432px; text-align:center"><img src="effektut-files/jp/nodetree.png" /></td><td class='td1'>
これは作成中の全てのパーティクルエミッターを格納しているプロジェクトの構造の概要です。ツリーのノードをクリックすると様々なウインドウにプロパティが表示され、そのプロパティを編集できるようになります。ノードツリーを右クリックすると新しいノードを追加するオプションを含むメニューが表示されます。この新しいノードは現在選択されているノードの子に追加されます。Effekseerの継承の考え方（子のノードが親のノードのプロパティを一部引き継ぐというもの）があります。継承については詳細は後で記載します。また、ノードはコピーや貼り付けができ、とても便利です。
</td></tr></table>


<a name="random_fields"></a>
<h3>ランダム値入力欄</h3>
<table>
<tr><td style="width:432px; text-align:center"><img src="effektut-files/jp/random.png" /></td><td class='td1'>
Effekseer内のたくさんの数値入力欄は左の画像のような見た目になっています。このような入力欄は、その値がランダムな値をとることができることを示しています。入力のための2つのオプションがあり、機能的には二つとも等しくなっています。<br><br>
<ul>
<li><b>最大・最小</b> 最大値と最小値を指定し、2つの値の間の値がランダムに適用されます。</li>
<li><b>中心・振幅</b> 中央値と広がり幅を指定します。例えば、中央5、広がり幅2であれば、3から7の間の値がランダムに適用されます。</li>
</ul>
</td></tr></table>

<a name="particle_emitters"></a>
<h2>パーティクルエミッタ（ノード）</h2>

ノードはEffekseerのコアです。これらは実際にパーティクルエフェクトを構成するパーティクルを出現させます。この章ではパーティクル自身でなく、ノードがパーティクルを出現させる方法の調節の仕方について説明します。(<i>出現したパーティクルの挙動と見た目の編集については後の章で扱います。</i>)

<a name="basic_settings"></a>
<h3>共通</h3>
<table>
<tr><td style="width:432px; text-align:center"><img src="effektut-files/jp/basic.png" /></td><td class='td1'>
<b>共通</b>ウインドウにはノードがパーティクルを出現させる方法を調節するための標準的なパラメーターが全てあります。上から順に説明します。<b>描画</b>はビューワーにこのノードのパーティクルの表示/非表示を設定します。註：これは単に編集を楽にするためのものであって、表示の設定によらず最終的な出力では表示されます。
<br><br>
<b>名称</b>は、便利にする以外の目的には使用されません。一度、ノードツリーでたくさんのノードを使用し始めると、それらを説明する名称をつけたくなるでしょう。
<br><br>
<b>生成数</b>は、ノードが出現させるパーティクルの最大数を設定します。<b>無限</b>チェックマークはそれを上書きして、ノードは制限なくパーティクルを出現させるようになります。
<br><br>
<b>生存時間</b>はフレーム単位でそれぞれのパーティクルが出現してからの生存時間を設定します。これは各パーティクルごとの独自の値で、パーティクルが出現してからすぐにカウントが始まります。指定した時間が過ぎるとパーティクルは自動的に消滅します。 これは<b>寿命により削除</b>がチェックされてないと無視されます。
<br><br>
<b>生成時間</b>はノードがどの程度早くパーティクルを生成するかを設定します。1の値は1フレームに1つパーティクルを生成することを意味します。10の値は10フレームに1回、パーティクルを生成することを意味します。小数も指定することができ、例えば0.1を指定すると1フレームに10個パーティクルが生成されます。 
<br><br>
<b>生成開始時間</b>はパーティクルを生成し始めるまでの待機時間を設定します。これは全てのエミッターが同時に動作し始めるするわけではない連続的なエフェクトに便利です。 
</td></tr></table>

<a name="inheritance"></a>
<h3>影響</h3>

既に触れたように、影響はEffekseerの特徴の一つです。例えばノードAがノードBの親ノードである場合、ノードAが生成する全てのパーティクルは、ノードBの生成するパーティクルと紐づきます (つまり、パーティクルを生成するようなパーティクルを作成することができます)。 共通 ウインドウにある設定には、意図的に変更しない限り、影響が適用されます。
<br><br>
<b>位置/回転/拡大の影響</b>はこれらが行うことの中では自明でありますが、ドロップダウンのオプションは不明瞭かもしれません。以下の3種類のオプションがあります。<br><br>
<ul>
<li><b>常時:</b> 親のパーティクルが存在し続ける限り, この子のパーティクルは常に親のパーティクルに対応する影響される値を更新します。</li>
<li><b>生成時のみ:</b> 子のパーティクルは生成された時に親のパーティクルの影響を受けますが、自身が動作する時は親のパーティクルの値の更新を無視します。</li>
<li><b>なし:</b> 子のパーティクルは親のパーティクル値に影響されません。</li>
</ul>もし <b>親削除時削除</b> がチェックされていた場合, 親のパーティクルが破壊されていたら自動的に子のパーティクルも破棄します。
<br><br>
<b>子が全て消滅時削除</b> は上記の逆です。もし、親のパーティクルが子のパーティクルをこれ以上生成しない場合、 全ての子が破棄された後のすぐに自動的にパーティクルが破棄されます。
<br><br>
<table>
<tr>
<td style="width:432px; text-align:center"><img src="effektut-files/inheritance_example.png" /></td>
<td class='td1'>
サンプルプロジェクト "<i>00_Basic/Laser03.efkproj</i>" は影響のいいサンプルです。表示されない "Core" パーティクルは "Core"パーティクルを継承する"Track"の位置と回転を誘導し、独特のジグザグの軌跡を表現します。
同時に、"Track"の位置を用いてジグザグの軌跡にそってパーティクルが生じるように"Particle"ノードは"Track"ノードを継承します。
</td>
</tr>
</table>

<a name="spawn_method_circular"></a>
<h3>生成位置 (円)</h3>

<table>
<tr><td style="width:432px; text-align:center"><img src="effektut-files/jp/circle_spawn.png" /></td><td class='td1'>
標準設定のウインドウから分離されたウインドウに<b>生成位置</b>ウインドウがあります。標準設定では、空間の単独の独立した点に対して相対的な位置にパーティクルを生成します。しかし、他に2種類の生成方法があります。1つ目は<b>円</b>であります。<br><br>
<br><br>
<b>開始角度</b>と<b>終了角度</b>はパーティクルが生じる円の範囲を指定できます。標準値は0～360度で、結果として円周全てにパーティクルが生じます。しかし、円の特定の弧のみにパーティクルが生じるように減らすこともできます。
<br><br>
円に沿って生じさせる複数の選択肢が存在します。<b>時計回り</b>と<b>反時計回り</b>は(すなわち時計の針の方向に)円に沿って連続的に順番にパーティクルが生成されます。<b>ランダム</b>はパーティクルを生じさせるために使用可能な頂点の中でランダムに選択しつつパーティクルを生成します。
<br><br>
<b>頂点</b>は円のパーティクルを生成する角度の数を制御します。
例えば、それが8だった場合、円の周囲を回転するための時計/反時計回りの設定に従って8か所からパーティクルが生じます。
同様にランダムだった場合、8個の角度からランダムにパーティクルが生じます。
もし、ランダムモードを使用している場合、ランダムの間隔の分散を増やしたいなら、360のような大きな数に頂点数を大きくします。
<br><br>
<b>生成角度に影響</b>はパーティクルが生成された場所の円の表面に対して垂直に生成されたパーティクルのY軸が向く効果を持つ。以下の図はそれの機能を描画しています。
</td></tr></table>
<br><br>
<table class=center style="width:550px">
<tr>
<td style='text-align:center'><img src="effektut-files/set_angle_false.png" /></td>
<td style='text-align:center'><img src="effektut-files/set_angle_true.png" /></td>
</tr>
<tr>
<td style='text-align:center'><i>円に沿って生成されつつ、Y軸方向に延びるパーティクル</i></td>
<td style='text-align:center'><i>それらのパーティクルで「生成時に角度設定」を有効にした効果</i></td>
</tr>
</table>

<a name="spawn_method_spherical"></a>
<h3>生成位置 (球)</h3>

<table>
<tr><td style="width:432px; text-align:center"><img src="effektut-files/jp/sphere_spawn.png" /></td><td class='td1'>
多くの点で、(3次元であることを除いて)生成位置(円)ととても似ています。
しかし、連続的な生成はこれに存在しません。球の表面に沿ってランダムにパーティクルを生成するのみです。
<b>X軸角度</b>と<b>Y軸角度</b>はパーティクルが生成される球の表面を制御します。

標準では0に設定させており、これではパーティクルが生成されません。
球の全ての表面からパーティクルが生成させるようにするために、ばらつきを180に設定すると、360度になり、すなわち軸の周囲全体を覆います。
しかしながら、上のセクションで円の弧に沿ってのみ生成するするように、球の表面の局所的なくさびを使用して生成できます。
下の図を参照してください。
</td></tr></table>

<table class=center style="width:550px">
<tr>
<td style='text-align:center'><img src="effektut-files/sphere_ani.gif" /></td>
<td style='text-align:center'><img src="effektut-files/wedge_ani.gif" /></td>
</tr>
<tr>
<td style='text-align:center'><i>360度全ての球にパーティクルが生成された場合</i></td>
<td style='text-align:center'><i>それぞれの軸にそって60度に小さくした場合の球のくさび</i></td>
</tr>
</table>

<a name="particles_behavior"></a>
<h2>パーティクル(挙動)</h2>

<a name="position_rotation_scale"></a>
<h3>位置/回転/拡大率</h3>
生成されたパーティクルの挙動を編集するのに重要なウインドウは位置、回転、拡大率の3つのウインドウです。これらの内容は名称からわかります。
<b>位置</b>ウインドウはパーティクルが時間経過で空間をどう動くかを制御します。
<b>回転</b>ウインドウはパーティクルの回転速度と方向を制御します。
<b>拡大率</b>ウインドウは生存時間内のパーティクルの大きさを制御します。
<br><br>
これらそれぞれのウインドウは時間経過でこれらの値が変更される異なる手法を選択できるようにします。
初期値では、<b>固定</b>モードに設定されており、これは、生成されたパーティクルは特性のために1つの固定値を持ち、
パーティクルは存在する全ての時間の間、その値にとどまることを意味します。

<a name="pva"></a>
<h3>PVA</h3>
PVAはPosition、Velocity、Accelerationの略です。 これはほとんどの場合に使用するモードです。 <b>位置</b>は生成時の初期値を設定し、<b>速度</b>は時間に対する初期値の変化率を設定し、<b>加速度</b>は時間に対する速度の変化率を設定します。
<br><br>
位置/回転/スケールの固定の標準設定では、初期値をランダム化することはできません。 したがって、速度と加速度を無視しても、PVAは固定のランダムな変形として使用できます。
<a name="easing"></a>
<h3>イージング</h3>

パーティクルの開始と終了の値がわかっている場合、イージングは理想的なモードです。 パーティクルの生存時間全体にわたって徐々に開始値から終了値に移行します。<br><br>

<table>
<tr>
<td style='text-align:center'><img src="effektut-files/easing.gif" /></td>
<td  class='td1'>
<b>イーズイン</b>と<b>イーズアウト</b>のドロップダウンボックスは、時間の経過とともに2つの値の間でパーティクルが遷移するスタイルを変更します。 左の図は、イージング速度のさまざまな組み合わせを示しています。 これらの例は、それぞれ{Ease In-Ease Out}の組の以下の組み合わせを参照しています。<br><br>
<table class=center cellpadding="30">
<tr><td>低速3-低速3</td><td>低速3-等速</td><td>低速3-高速3</td></tr>
<tr><td>等速-低速3</td><td>等速-等速</td><td>等速-高速3</td></tr>
<tr><td>高速3-低速3</td><td>高速3-等速/td><td>高速3-高速3</td></tr>
</table></td>
</tr>
</table>

<a name="fcurve"></a>
<h3>F-Curve</h3>
イージングとPVAでは性能が足りず、時間の経過と共にパーティクルが値をどのように遷移するかをより細かく制御する必要がある場合、F-Curveを使用します。下のスクリーンショットは、2つのF-Curveグラフを示しています。上のグラフは、グラフが最初にどのように表示されるかを示し、下のグラフは、値が初期化されたグラフの例を示しています。
<br><br>
グラフのY軸は値を表し、グラフのX軸は時間を表します。 0はパーティクルが発生する時刻であり、グラフの右側の濃いグレーのエリアはパーティクルが消滅する時刻です。 ビューアと同様に、グラフは<b>マウスの中央ボタン</b>でパンすることができ、<b>スクロールホイール</b>でズームすることができます。 また、マウスホイールをスクロールしながら<b>Ctrl</b>または<b>Shift</b>キーを押しながらズームの軸を選択することもできます。
<br><br>
<div style="text-align:center;"><img src="effektut-files/jp/fcurve.png" /></div>
<br>
グラフにポイントを実際に追加するには、キーボードの<b>X / Y / Z</b>キー（X / Y / Zフィールドの値の設定に直感的に対応しています）を使用します。 ポイントをクリックするとポイントが選択され、ドラッグするとポイントの位置を変更できます。 ポイントからまっすぐ上下にドラッグすると、ベジェ曲線のピボットが作成されます（ポイントがベジェモードに設定されている場合はデフォルトです）。
<br><br>
<b>種類</b>は、選択したポイントとの間で接続するラインのスタイルを設定します。 <b>線形</b>オプションは線を直線にし、<b>ベジェ</b>オプションでは線を曲線にします。
<br><br>
<b>最大オフセット</b>と<b>最小オフセット</b>を使用すると、F-Curveの値にランダム化を適用できます。 これらの偏差は、選択されたライン全体に適用されます（つまり、ライン上のすべてのポイントが同じランダム量だけ外れます）。選択されたポイントには適用されません。 ポイントごとにランダム化することはできません。
<br><br>
<b>開始</b>と<b>終了</b>は、現在選択されているポイントではなく、選択したライン全体を参照します。 それらは、最初に定義されたポイントの前に、最後に定義されたポイントの後に広がる値を定義するためにとられる動作を決定します。 デフォルトでは、最初/最後の点に一致する一定の値にとどまります。 ただし、他のオプションを使用すると、最初から値をループすることができます。 値が繰り返しの性質を持つ場合、これは特に有用です。 パターンの最初の動作を定義してから、残りの部分をループで埋める必要があります。 以下の図は、簡単に正弦波パターンを作るために適用されたものです。
<br><br>
<div style="text-align:center;"><img src="effektut-files/floop.png" /></div>

<a name="point_of_attraction"></a>
<h3>引力</h3>
<table>
<tr><td style="width:300px; text-align:center"><img src="effektut-files/homing.png" /></td><td class='td1'>
Effekseerでは、磁石のように作用するパーティクルエミッタのターゲット位置を定義し、Effekseer内に生成されたパーティクルを描画します。以下に示すサンプルプロジェクト<i>00_Basic/Homing_Laser01.efkproj</i>は 、「ホーミングレーザー」を作成するために、この機能を使用しています。 それらは中央の発砲地点から飛び出し、ターゲット位置に向かいます。 <b>振る舞いウィンドウ</b>の一番下で、あなたはエミッタのターゲット位置を定義することができます。
<br><br>
標準では、ターゲット位置は有効ではないため、その位置を変更しても目に見える効果はありません。 引力を有効にするドロップダウンリストから<b>引力</b>を選択することにより、<b>振る舞いウインドウ</b>を介してターゲット位置を有効にできます。
<br><br>
<b>引力</b>のパラメータは、どのように迅速に（強制的に）粒子がアトラクターに引き込まれているか、を制御します。 <b>抵抗</b>パラメータは、どの程度、パーティクルが直接引力(点)に引き込まレルことに抵抗するかを制御します。 大きい数値の場合、粒子は引っ張られた時点で引力(点)に直接詰まります。小さい数値の場合、粒子は引力(点)の周りの楕円軌道に入ります（数値が小さいほど軌道の半径が大きくなります）。 抵抗は負の場合もあります。この場合、引力のポイントは実際に粒子を引っ張るのではなく、押し退けます。

</td></tr></table>

<a name="particles_appearance"></a>
<h2>パーティクル (見た目)</h2>

<a name="basic_render_settings"></a>
<h3>描画共通設定</h3>
<b>描画共通設定</b>ウィンドウでは、パーティクルの見た目に関する重要で一般的に使用される属性を設定できます。何よりもまず、<b>テクスチャ</b>の入力欄では、ハードディスク内の任意のイメージを読み込んで、パーティクルの基本的な見た目として使用できます。他のすべては、このテクスチャがシーン内でどのように描画されるかを変えることを中心に行います。
<br><br>
<b>ブレンド</b>を使用すると、他のパーティクルが重なっているときのテクスチャの表示を調整できます。下の画像は、異なるブレンドタイプの例を示しています。 左から右へ：不透明、ブレンド、加算、減算、および乗算となっています。
<br><br>
<div style="text-align:center;"><img style="border: none;" src="effektut-files/blendmodes.png" /></div>

<b>フィルタ</b>は、それが拡大されているときに、粒子の大きさを変更するために使用される方法を設定します。 2つのオプションしかなく...標準設定の、 <b>線形補間</b>は、一緒に隣接する画素の色をブレンドしようとします。 一方、 <b>最近傍</b>は、それが拡大されたときに画像の画素の雰囲気を残します。

<br><br>
<b>フェードイン</b>、<b>フェードアウト</b>はその名前が示すように正しくフェードを行います。これらのために指定された持続時間は、常にパーティクルの寿命の始めと終わりを基準にしています。例えば、フェードインが10フレームの期間に設定され、フェードアウトが20フレームの期間に設定されているとします。その後、パーティクルが100フレームの間、生存するように設定されていた場合、パーティクルは生成後、1〜10フレームでフェードインし、80〜100フレームでフェードアウトします。
<br><br>
<table>
<tr><td style="width:300px; text-align:center"><img style="border: 20px solid black;" src="effektut-files/uvscroll.gif" /></td><td class='td1'>
<b>UV</b>は、あなただけのテクスチャ画像の全てではなく、一部を描画できます。 これには、さまざまな用途があり、特に、我々は<b>スクロール</b>と<b>アニメーション</b>の設定について説明します：
<ul>
<li><b>UVスクロール</b>では、ある固定されたX/Y速度でテクスチャの表面上をスクロールすることができます。 左のイメージは、円錐形の表面上でUVスクロールされた煙テクスチャを示しています。 あなたは、一般的に<b>ラップ</b>が繰り返しに設定されていることを確認したいと思うので、それがスクロールするようにテクスチャが周囲を包みます。</li>
<li><b>UVアニメーション</b>では 、テクスチャとしてスプライトシートを使用して、アニメーションとして再生することができます。 スタートは、スプライトシートの最初のフレームの左上の座標でなければなりません。 サイズは 、アニメーションの各フレームのピクセル単位のサイズである必要があります。 <b>Xカウント</b>及び<b>Yカウント</b>は再生するアニメーションを構成するスプライトシート内の行/列の数です。 フレーム長は、アニメーションが再生される速度です。</li>
</ul>
</td></tr></table>

<br>

<b>歪み</b>は、テクスチャがその背後に存在する他のパーティクルの外観に影響を与えるために透明な歪みマップとして使用することが可能になります。 テクスチャ内の画素の輝度は、歪みの領域に影響します。 以下のアニメーションでは、この効果を実際に表示しています。 表示されているパーティクルは、歪みが適用されたパーティクルではなく、むしろ前方に配置されている別のテクスチャです。
<br><br>
<table class=center style="width:550px">
<tr>
<td style='text-align:center'><img src="effektut-files/nodistort.gif" /></td>
<td style='text-align:center'><img src="effektut-files/distort.gif" /></td>
</tr>
<tr>
<td style='text-align:center'><i>パーティクルは歪みのない状態で前後に移動します。</i></td>
<td style='text-align:center'><i>それらの同じパーティクルは、歪みが加えられたテクスチャの後を通過します。</i></td>
</tr>
</table>

<a name="sprites"></a>
<h3>スプライト</h3>
<b>描画</b>ウィンドウでは、シーンにテクスチャを描画する方法を選択できます。 標準の描画方法は<b>スプライト</b>で、平らな四角にテクスチャを描画します。
<br><br>
<b>設定</b>は 特に回転の観点から、表面の挙動を設定します。 デフォルトでは、表面が常に自動的にカメラに向けて回転することを意味する、<b>ビルボード</b>に設定されています。 これはまた、パーティクルに設定された回転値を完全に無視することを意味します。 これとは反対に、表面の向きを設定するために、パーティクルの回転値を使用する、<b>固定</b>されています。 下の図は、回転値がランダムに割り当てられたパーティクルに適用される3つの異なる設定を示しています。 左から右：ビルボード、固定（Y軸）、固定。
<br><br>
<div style="text-align:center;"><img src="effektut-files/billboards.png" /></div>

<b>全体色</b>はテクスチャ画像全体に固定された色をブレンドします。 一方、<b>頂点カラー</b>を使用して 、面の各角に対応する4色を指定できます。 これらの色は、スプライトのサーフェス上にグラデーションを作成することによって一緒にブレンドされます。
<br><br>
全体色は、ブレンドカラーのRGBA/HSVAコンポーネントをランダム化する機能を提供します。または、パーティクルが生存している間、ある色から別の色に徐々に変化する機能を提供します。Fカーブを使用して色を設定することもできます。これは、キーボード上のR/G/B/Aキーを使用して経由点を設定することを除いて、位置のFカーブと同じ方法で動作します。 Fカーブは、HSVAモードではなく、RGBAモードのみを提供します。 ただし、以下の画像のように、色相と値はRGBコンポーネントを使用して簡単に複製できます。

<br><br>
<div style="text-align:center;"><img src="effektut-files/hue.png" /></div>
<br><br>
<b>頂点座標</b>は、あなたが表面で使用される角の相対座標を編集することができます。 これにより、表面の形状を矩形、三角形、または他の非正方形に変更するといった明白ないくつかのことを行うことができます。 これでさまざまな方法でテクスチャを歪ませたり、伸ばしたり、歪ませたり、切り抜いたりすることができます。 あまり明白でない使用法として、表面の原点（表面が回転して拡大する点）を変更することがあります。 デフォルトでは、原点は表面の幾何学的中心に中心がありますが、サーフェスの形状を実際に変更することなく、頂点座標の値をオフセットすることで移動できます。
<a name="rings"></a>

<h3>リング</h3>
<table>
<tr><td style="width:300px; text-align:center"><img style="border: 20px solid black;" src="effektut-files/ring_vertex.png" /></td><td class='td1'>
リングは強力なオプションで、テクスチャを単純な平面の四角形以外の図形に展開することができます。 この名前にもかかわらず、リングを使用して、円、三角、円錐、円柱、ピラミッド、キューブなどさまざまな幾何学的形状を生成することができます。

<br><br>
<b>頂点数</b>は、あなたがN角形を構成する点の数を設定することができます。 デフォルトでは16で、円形の形をしています（36などのより高い値に設定することでさらに滑らかな円を得ることができます）。 ただし、これを低い値に設定して他の形状を作成することもできます。 左の画像に見られるように、3つの頂点は三角形を作成し、4は四角形/菱形を作成し、5は五角形を作成します。

<br><br>
<b>視野角</b>は 、あなたが描く円（円周）の量を変更することができます。これは円形/球状の生成方法で使用される設定に非常に似ています。左のイメージは、異なる形状のこの値の異なる設定を示しています。 左から右に360度、270度、180度を示します。
<br><br>
<b>外側</b>と<b>内側</b>は、リングの外側と内側の半径のサイズ/位置を調整します。 これらの値の創造的な設定を使用すると、様々な種類の形状を作成できます。 例えば、内側の半径を0に設定すると、リングが円に変換されます。 さらに、半径は2つの異なる軸で調整することができ、外側の半径を内側の半径よりも高くすることができます。 これにより、円錐や円柱のような3次元形状を作成することができます。 これを頂点数と組み合わせると、より多くの3D形状を作成できます。 例えば、頂点が3つの円錐はピラミッドを作成し、頂点が4つの円柱は立方体を作成します。
<br><br>
カラーブレンドの点では、リングは最大3色のグラデーションをサポートします。 外側の半径に最も近い領域には1つの色、内側の半径に最も近い領域には1つの色、これらの2つの中間色には1つの色があります。 <b>センター比率パラメータ</b>は、中間カラーの位置を調整します。 数値が小さいほど内側の半径に近づきますが、数値が大きいほど外側の半径に近づきます。
</td></tr></table>
<br><br>
<table class=center style="width:1000px">
<tr>
<td style='text-align:center'><img src="effektut-files/ring_examples.png" /></td>
<td style='text-align:center'><img style='border-top:30px solid black; border-bottom:30px solid black;' src="effektut-files/ring_3d.png" /></td>
</tr>
<tr>
<td style='text-align:center'><i>不透明度、半径、および中央の比率の設定が異なるリング</i></td>
<td style='text-align:center'><i>Y方向の外側半径を拡張することによって作られた3D形状</i></td>
</tr>
</table>

<a name="ribbons_tracks"></a>
<h3>リボン/軌跡</h3>
<b>リボン</b>を使用すると 、線を作成することができます。 これまでにこのチュートリアルで示したいくつかの画像にはリボンを使用しています。 特に、イージングアニメーションの線、および "ホーミングミサイル"の例のオーブの後ろの軌跡に使用されています。
<br><br>
リボンエミッタがパーティクルを生成するたびに、そのパーティクルと以前に生成されたリボンの領域との間に線が引かれます。 生成された領域の位置と速度を変えることによって、異なる形状の線を作成することができます。 リボンの一般的な使い方は、リボンエミッタを他のパーティクルの子として設定し、リボンエミッタのパーティクルを生成時に親の位置を継承させることです。 これにより、親パーティクルが移動する際に、後ろに軌跡が描かれます。
<br><br>
<b>軌跡</b>は、リングの色の特徴が組み込まれていること以外は、多かれ少なかれリボンと同じです。軌跡は、線の外側、内側、および中心点に異なる色と大きさを定義できます。

<a name="exporting"></a>
<h2>出力</h2>

<a name="to_2d"></a>
<h3>2Dスプライトへ、もしくはアニメーションへ</h3>
2Dスプライトシートへの出力は、<b>録画</b>ウィンドウから行います。<b>X/Y Count</b>は、スプライトシートのレイアウト、特に各行と列のフレーム数を決定します。 その後、スプライトシートに含めるフレームの総数も決まります。 たとえば、{X = 4、Y = 6}は、4列6行に配置された24フレームのスプライトシートを生成します。 スプライトシートとしてエクスポートするだけでなく、形式のドロップダウンボックスからGIFまたはAVIファイルに直接書き出すことができます。
<br><br>
<b>開始フレーム</b>は、録画を開始するアニメーションのフレームです。 （小さな警告：これをデフォルト値の1にしておくと、最初のフレームは常に空白になります。パーティクルが発生するには少なくとも1つのフレームが必要です）
<br><br>
<b>フレームスキップ</b>は、フレームが記録される間隔を決定します。 たとえば、これが2に設定されている場合、フレーム{1,4,7,10、...}のみが記録に含まれます。 これは出力のサイズを小さくするのに便利ですが、明らかにより断片的なアニメーションにもなります。
<br><br>
「ガイド表示」チェックマークをクリックすると、ビューアーに黒いボックスが表示されます。 2Dスプライトシートを出力すると、そのブラックボックス内に表示されたとおりにアニメーションが出力されます。 したがって、最終出力を見たいのと同じように、ビュー内でズーム/方向の設定を確実に行う必要があります。
<br><br>
デフォルトでは、スプライトは黒い背景を含めてエクスポートされます。 背景を取り除くためには常に加算ブレンドを使用する必要があるため、実際には使用するのが難しくなります。 透明部分のドロップダウンメニューから「オリジナル画像アルファを使用」を選択すると、背景は無視されますが、使用したテクスチャのすべてに独自の透明/アルファチャンネルがあることを確認する必要があります。 さもなければ、Effekseerが自動的にエクスポートされたスプライトを透明にしようとする "Generate alpha"を試すことができます。 （透明度はAVI出力オプションでも機能するので、ビデオ編集ソフトウェアで透明なレイヤーとしてエクスポートされたAVIを簡単に使用できます）
<br><br>
<table class=center style="width:1000px">
<tr>
<td style='text-align:center'><img src="effektut-files/alphaestimation_off.png" /></td>
<td style='text-align:center'><img src="effektut-files/alphaestimation_on.png" /></td>
</tr>
<tr>
<td style='text-align:center'><i>透過性なしで出力されたスプライトシート</i></td>
<td style='text-align:center'><i>「Generate alpha」オプションを使用して出力された同じスプライトシート</i></td>
</tr>
</table>

<a name="to_3d"></a>
<h3>3Dエフェクトへ</h3>

<b>「ファイル」->「書き出し」</b>を選択すると、Effekseerのみが使用する独自のファイル形式である *.efk 形式に書き出すことができます。 これらのファイルは特別なEffekseerプラグインなどで使用してゲームに組み込むことができます。

<br><br>
Unityの場合、<b>「Effekseer/GameEngine/Unity」</b>フォルダには、プロジェクト内の *.efkファイルを使用するプラグイン（Unity5用）が含まれています。また、このプラグインの動作を示すサンプルプロジェクトも含まれています。 ユニティパッケージをインポートした後、プロジェクトのアセットフォルダに、次のディレクトリ構造を設定します。
<br><br>
<img src="effektut-files/unity_resource.png" />
<br>
エクスポートされた*.efkファイルは、エフェクトが使用するテクスチャを含め、StreamingAssets/Effekseerフォルダに保存されます（これはテクスチャが *.efk ファイルに保存されず、テクスチャへの参照のみであるためです） 同じ名前が付けられ、元の *.efkproj と同じ方法で *.efk ファイルに相対的に配置されます）。 次に、新しい Effekseer Emitter をシーンに追加して、エフェクトを名前で参照できます（efkファイル拡張子を省略）。
<br><br>

<img src="effektut-files/unity_emitter.png" />
</body>
</html>
